<!DOCTYPE html>
<html>
<title>Shotgun</title>

<head>
    <meta charset="utf-8">
    <script>
        let path = '';
        let subPaths = location.pathname.split('/');
        if (subPaths.length === 2 && subPaths[1].indexOf('html') === -1) {
            path = subPaths[1];
        }
        path = path && path + '/';
        document.write('<script src="' + path + 'head_cdn0.js"><\/script>');
        document.write('<script src="' + path + 'head_cdn1.js"><\/script>');
    </script>
</head>

<body>
    <div class="container">
        <main id="app"></main>
    </div>

    <template id="account-list">
        <section>
            <el-button @click="toAdd" size="mini" type="primary">新建账号</el-button>
            <br><br>
            <el-table :data="accounts" max-height="1000" style="font-size: 15px" size="mini" stripe>
                <el-table-column prop="account" label="账号" width="150" size="mini"></el-table-column>
                <el-table-column prop="api_type" label="接口类型" width="90" size="mini">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.api_type=='tdx'">通达信</el-tag>
                        <el-tag v-if="scope.row.api_type=='huaxin_file'">华鑫文件</el-tag>
                        <el-tag v-if="scope.row.api_type=='huaxin_api'">华鑫接口</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="enable" label="启用" width="60" size="mini">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.enable==true">是</el-tag>
                        <el-tag type="success" v-if="scope.row.enable==false">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="password" label="密码" size="mini"></el-table-column>
                <el-table-column prop="yyb_id" label="营业部ID" width="90" size="mini"></el-table-column>
                <el-table-column prop="trade_server" label="交易服务器" size="mini"></el-table-column>
                <el-table-column prop="port" label="端口" width="80" size="mini"></el-table-column>
                <el-table-column prop="file_path" label="文件单路径" width="300" size="mini"></el-table-column>
                <el-table-column prop="gddm_sz" label="股东代码(深)" size="mini"></el-table-column>
                <el-table-column prop="gddm_sh" label="股东代码(沪)" size="mini"></el-table-column>
                <el-table-column prop="enable_reverse_repo" label="启用逆回购" size="mini">
                    <template slot-scope="scope">
                        <el-tag type="primary" v-if="scope.row.enable_reverse_repo==true">是</el-tag>
                        <el-tag type="success" v-if="scope.row.enable_reverse_repo==false">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="备注" size="mini"></el-table-column>
                <el-table-column fixed="right" label="操作" width="150" size="mini">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="primary" size="mini">编辑</el-button>
                        <el-button @click="remove(scope.row)" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
    </template>

    <template id="account-add">
        <section>
            <el-form label-width="120px">
                <el-form-item label="账号: " size="mini" style="width:300px">
                    <el-input v-model="account.account"></el-input>
                </el-form-item>
                <el-form-item label="接口类型: " size="mini" style="width:300px">
                    <el-select v-model="account.api_type" size="mini">
                        <el-option value="tdx" label="通达信"></el-option>
                        <el-option value="huaxin_api" label="华鑫API"></el-option>
                        <el-option value="huaxin_file" label="华鑫FILE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启用: " size="mini" style="width:300px">
                    <el-select v-model="account.enable" size="mini">
                        <el-option :value="true" label="是"></el-option>
                        <el-option :value="false" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码: " size="mini" style="width:300px">
                    <el-input v-model="account.password"></el-input>
                </el-form-item>
                <el-form-item label="营业部ID: " size="mini" style="width:300px">
                    <el-input v-model="account.yyb_id"></el-input>
                </el-form-item>
                <el-form-item label="交易服务器: " size="mini" style="width:300px">
                    <el-input v-model="account.trade_server"></el-input>
                </el-form-item>
                <el-form-item label="端口: " size="mini" style="width:300px">
                    <el-input v-model="account.port"></el-input>
                </el-form-item>
                <el-form-item label="文件单路径: " size="mini" style="width:300px">
                    <el-input v-model="account.file_path"></el-input>
                </el-form-item>
                <el-form-item label="股东代码(深): " size="mini" style="width:300px">
                    <el-input v-model="account.gddm_sz"></el-input>
                </el-form-item>
                <el-form-item label="股东代码(沪): " size="mini" style="width:300px">
                    <el-input v-model="account.gddm_sh"></el-input>
                </el-form-item>
                <el-form-item label="备注: " size="mini" style="width:300px">
                    <el-input v-model="account.description"></el-input>
                </el-form-item>
                <el-form-item label="启用逆回购: " size="mini" style="width:300px">
                    <el-select v-model="account.enable_reverse_repo" size="mini">
                        <el-option :value="true" label="是"></el-option>
                        <el-option :value="false" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="createAccount" size="mini" type="primary">添加</el-button>
                </el-form-item>
            </el-form>
        </section>
    </template>


    <template id="account-edit">
        <section>
            <el-form label-width="120px">
                <el-form-item label="账号: " size="mini" style="width:300px">
                    <el-input v-model="account.account" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="接口类型: " size="mini" style="width:300px">
                    <el-select v-model="account.api_type" size="mini">
                        <el-option value="tdx" label="通达信"></el-option>
                        <el-option value="huaxin_api" label="华鑫API"></el-option>
                        <el-option value="huaxin_file" label="华鑫FILE"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="启用: " size="mini" style="width:300px">
                    <el-select v-model="account.enable" size="mini">
                        <el-option :value="true" label="是"></el-option>
                        <el-option :value="false" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码: " size="mini" style="width:300px">
                    <el-input v-model="account.password"></el-input>
                </el-form-item>
                <el-form-item label="营业部ID: " size="mini" style="width:300px">
                    <el-input v-model="account.yyb_id"></el-input>
                </el-form-item>
                <el-form-item label="交易服务器: " size="mini" style="width:300px">
                    <el-input v-model="account.trade_server"></el-input>
                </el-form-item>
                <el-form-item label="端口: " size="mini" style="width:300px">
                    <el-input v-model="account.port"></el-input>
                </el-form-item>
                <el-form-item label="文件单路径: " size="mini" style="width:300px">
                    <el-input v-model="account.file_path"></el-input>
                </el-form-item>
                <el-form-item label="股东代码(深): " size="mini" style="width:300px">
                    <el-input v-model="account.gddm_sz"></el-input>
                </el-form-item>
                <el-form-item label="股东代码(沪): " size="mini" style="width:300px">
                    <el-input v-model="account.gddm_sh"></el-input>
                </el-form-item>
                <el-form-item label="启用逆回购: " size="mini" style="width:300px">
                    <el-select v-model="account.enable_reverse_repo" size="mini">
                        <el-option :value="true" label="是"></el-option>
                        <el-option :value="false" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注: " size="mini" style="width:300px">
                    <el-input v-model="account.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="editAccount" size="mini" type="primary">确认</el-button>
                </el-form-item>
            </el-form>
        </section>
    </template>

    <script type="text/javascript">
        let List = Vue.extend({
            template: '#account-list',
            data: function () {
                return {
                    accounts: []
                }
            },
            methods: {
                toAdd: function () {
                    router.push('/account-add')
                },
                remove: function (data) {
                    let id = data.id;
                    let self = this;
                    this.$confirm('此操作将永久删除账号:' + data.account + ', 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let virtualPath = getVirtualPath();
                        axios.delete(`${virtualPath}/api/accounts/${id}`).then(function (resp) {
                            showNotify(self, resp, 'success');
                        }).catch(function (error) {
                            showNotify(self, error.response, 'warning')
                        });
                        this.refresh()
                    });

                },
                edit: function (data) {
                    router.push({ name: 'account-edit', params: { id: data.id } })
                },
                refresh: function () {
                    var self = this;
                    let virtualPath = getVirtualPath();
                    axios.get(`${virtualPath}/api/accounts`).then(function (resp) {
                        self.accounts = resp.data;
                    });
                },
            },
            mounted: function () {
                var self = this;
                let virtualPath = getVirtualPath();
                axios.get(`${virtualPath}/api/accounts`).then(function (resp) {
                    self.accounts = resp.data;
                });
            }
        });

        let AddAccount = Vue.extend({
            template: '#account-add',
            data: function () {
                return { account: {} }
            },
            methods: {
                createAccount: function () {
                    let self = this;
                    let virtualPath = getVirtualPath();
                    axios.post(`${virtualPath}/api/accounts`, {
                        account: this.account.account,
                        api_type: this.account.api_type,
                        enable: this.account.enable,
                        password: this.account.password,
                        yyb_id: parseInt(this.account.yyb_id),
                        trade_server: this.account.trade_server,
                        port: parseInt(this.account.port),
                        file_path: this.account.file_path,
                        gddm_sz: this.account.gddm_sz,
                        gddm_sh: this.account.gddm_sh,
                        enable_reverse_repo: this.account.enable_reverse_repo,
                        description: this.account.description
                    }).then(function (resp) {
                        showNotify(self, resp, 'success');
                    }).catch(function (error) {
                        showNotify(self, error.response, 'warning')
                    });
                    router.push('/');
                }
            }
        });


        var AccountEdit = Vue.extend({
            template: '#account-edit',
            data: function () {
                return { account: {} };
            },
            methods: {
                editAccount: function () {
                    let self = this;
                    let virtualPath = getVirtualPath();
                    axios.put(`${virtualPath}/api/accounts/` + this.account.id, {
                        account: this.account.account,
                        api_type: this.account.api_type,
                        enable: this.account.enable,
                        password: this.account.password,
                        yyb_id: parseInt(this.account.yyb_id),
                        trade_server: this.account.trade_server,
                        port: parseInt(this.account.port),
                        file_path: this.account.file_path,
                        gddm_sz: this.account.gddm_sz,
                        gddm_sh: this.account.gddm_sh,
                        enable_reverse_repo: this.account.enable_reverse_repo,
                        description: this.account.description
                    }).then(function (resp) {
                        showNotify(self, resp, 'success');
                    }).catch(function (error) {
                        showNotify(self, error.response, 'warning')
                    });
                    router.push('/');
                }
            },
            mounted: function () {
                let self = this;
                let virtualPath = getVirtualPath();
                axios.get(`${virtualPath}/api/accounts/` + this.$route.params.id).then(function (resp) {
                    self.account = resp.data;
                });
            }
        });

        let router = new VueRouter({
            routes: [
                { path: '/', component: List, name: 'root' },
                { path: '/account-add', component: AddAccount, name: 'account-add' },
                { path: '/account-edit', component: AccountEdit, name: 'account-edit' }
            ]
        });

        function showNotify(self, resp, type) {
            self.$notify({
                showClose: true,
                title: '提示',
                message: resp.data.message,
                type: type
            })
        }

        function getVirtualPath() {
            let virtualPath = location.pathname.split('/')[1]
            if (virtualPath.indexOf('.') != -1) {
                virtualPath = '';
            }
            if (virtualPath && virtualPath.indexOf('/') == -1) {
                virtualPath = '/' + virtualPath;
            }
            return virtualPath;
        }

        new Vue({
            el: '#app',
            router: router,
            template: '<router-view></router-view>'
        });
    </script>

</body>

</html>